<template>
  <span class="time-count-down">{{showTime}}</span>
</template>

<script>
import { formatTime } from "../utils/filters";
export default {
  props: ["time"],
  data() {
    return {
      showTime: "loading...",
      Timer: 0
    };
  },
  mounted() {
    this.caculateTime();
    if (this.Timer === 0)
      this.Timer = setInterval(() => {
        this.caculateTime();
      }, 1000);
  },
  methods: {
    caculateTime() {
      let Dt = new Date();
      let local = Dt.getTime();
      let dValue = parseInt(local / 1000 - this.time);
      let h = parseInt(dValue / 3600);
      dValue -= h * 3600;
      let m = parseInt(dValue / 60);
      dValue -= m * 60;
      let s = parseInt(dValue);
      if (parseInt(local / 1000 - this.time) >= 86400)
        this.showTime = formatTime(this.time);
      else if (parseInt(local / 1000 - this.time) >= 3600)
        this.showTime = `${h}${
          h == 1 ? this.$t("components.hour") : this.$t("components.hours")
        }${m}${
          m == 1 ? this.$t("components.min") : this.$t("components.mins")
        }${s}${
          s == 1 ? this.$t("components.sec") : this.$t("components.secs")
        }`;
      else if (parseInt(local / 1000 - this.time) >= 60)
        this.showTime = `${m}${
          m == 1 ? this.$t("components.min") : this.$t("components.mins")
        }${s}${
          s == 1 ? this.$t("components.sec") : this.$t("components.secs")
        }`;
      else
        this.showTime = `${s}${
          s == 1 ? this.$t("components.sec") : this.$t("components.secs")
        }`;
    }
  },
  beforeDestroy() {
    //清除定时器
    clearInterval(this.Timer);
  }
};
</script>